<!--'05载荷谱雨流计数处理1'-->
<template>
  <div id="container" class="sum" style="width: 100%;height: 100%;overflow-x:auto;overflow-y:auto">

    <a-row align="top" justify="left" style="margin-top:6px;height: 100%" type="flex">
      <a-col :span="10" class="left_col" style="height: 100%">
        <div class="div_left" style="margin-left: 3%;width: 100%;height: 100%">
          <div class="div_leftup" style="width: 100%">
            <div class="title"><strong><label class="title1">输入参数</label></strong></div>

            <div style="display: flex;margin-top: 3%;text-align: center;width: 100%;height: 40%;">
              <div style="text-align: right;margin-left: 16%; width: 50%;height: 95%">
                <ul  class="ul_05">
                  <li class="li_05">无效幅值阀值</li>
                  <li class="li_05">幅值间隔值</li>
                  <li class="li_05">平均值间隔值</li>
                  <li class="li_05">雨流谱最大间隔份数</li>
                  <li class="li_05">雨流谱最小间隔份数</li>
                  <li class="li_05">载荷文件选择列数</li>
                </ul>
              </div>

              <div style="text-align: left; width: 50%;height: 95%">
                <ul  class="ul_05">
                  <li class="li_05"><input type="text" v-model="this.$store.state.file.dataList[5].threshold_amp"/></li>
                  <li class="li_05"><input type="text" v-model="this.$store.state.file.dataList[5].space_amp_input"/></li>
                  <li class="li_05"><input type="text" v-model="this.$store.state.file.dataList[5].space_mean_input"/></li>
                  <li class="li_05"><input type="text" v-model="this.$store.state.file.dataList[5].max_segment"/></li>
                  <li class="li_05"><input type="text" v-model="this.$store.state.file.dataList[5].min_segment"/></li>
                  <li class="li_05"><input type="text" v-model="this.$store.state.file.dataList[5].column"/></li>
                </ul>
              </div>
            </div>

            <div style="margin-left: 5%;margin-right: 5%;margin-bottom: 15% ;margin-top: 10%;font-size: 90%">
<!--              <p>注意:-->
<!--                载荷需放入当前目录Rainflowload中，载荷文件类型为XL S或TXT;频次文件需放入当前目录Rainflowfrequency中,文件类型只能为XLS，-->
<!--                第1列为载荷名，-->
<!--                第2列为频次;雨流载荷谱写入当前目录Rainflowresult Vainflowmatrix.xIs文件中，-->
<!--                第1列为循环次数，第2列幅值，第3列为平均值。-->
<!--              </p>-->
            </div>
          </div>
          <div class="div_buttom" style="text-align: center; ">
            <button class="button_05" style="margin-right: 10%" @click="compute">雨流计数处理</button>
            <button class="button_05" @click="clear">清楚雨流载荷谱</button>
          </div>
        </div>
      </a-col>

      <a-col span="14" class="right_col" >
        <div class="right">
          <div class="right_top">输出参数</div>
          <div class="right_middle">
            <div class="right_middle_table">
              <table style="width: 100%;height: 30%;background: #D7D7D7">
                <thead>
                <tr class="table_title">
                  <th >载荷</th>
                  <th >幅值</th>
                  <th >平均值</th>
                </tr>
                </thead>
              </table>
              <div style="width: 102.6%;height: 80%;overflow-y: scroll">
                <table style="width: 100%;height: 20%;border-bottom: 1px solid grey">
                  <tbody class="table_body">
                  <tr style="border-top: 1px grey solid" v-for="(table_data,index) in tableData" :key="index">
                    <td >{{table_data[0]}}</td>
                    <td >{{table_data[1]}}</td>
                    <td >{{table_data[2]}}</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="right_bottom">注意:所有选项的单位均与载荷文件中的单位相同</div>
        </div>
      </a-col>
    </a-row>

  </div>


</template>

<script>
import {comp_nameRFC_matrix_deal} from "@/api/file"

export default {
  name: "nameRFC_matrix_deal",
  created () {
    document.title = '载荷谱雨流计数处理'
    this.$store.state.file.key = 5
  },
  data() {
    return {
      tableData: [[]],
    }
  },
  methods: {
    compute() {
      comp_nameRFC_matrix_deal(this.$store.state.file.dataList[5])
          .then(res => {
            console.log("打印结果");
              console.log(res)
              this.tableData = res
          })
          .catch(err => {
            this.$message.error(err);
          });
    },
    clear() {
      this.tableData = [[]];
    }

  }
}
</script>

<style scoped>
.ul_05{
  height: 90%;
  width: 80%;
}
.li_05{
  height: 22%;
  list-style-type: none;
}
input{
  width:40%;
  height: 85%;
  text-align: center;
  border: 1px solid rgba(231, 231, 231, 1.986);
}
a-col {
  height: 100%;
  width: 100%;
}

a-row {
  height: 100%;
  width: 100%;
}
.title {
  width: 100%;
  margin: 0px;
  padding: 0px;
  font-size: 17px;
  background-color: #D7D7D7;
  border-radius: 3px;
  padding-left: 3%;
  font-weight: bolder;
}
.div_table {
  padding-left: 10%;
  padding-right: 10%;
}

.div_buttom {
  width: 90%;
  height: 20%
}

div {
  font-size: 18px;
}

input {
  margin-left: 15%;
  width: 55%;
  text-align: center;
  height: 73%;
}

.button_05 {
  border: 1px solid #EBEBEB;
  height: 25%;
  margin-top: 7%;
  padding-top: 0.5%;
  padding-bottom: 0.3%;
  padding-left: 3%;
  padding-right: 3%;
  font-size: 100%;
  border-radius: 4px;
  /*background-color: #EBEBEB;*/
}

.title2 {
  hight: 20%;
  background-color: #D7D7D7;
  font-size: 18px;
}
td{
  border: 0.5px solid rgba(231, 231, 231, 0.886);
}
th{
  border-right: 0.5px solid rgba(231, 231, 231, 0.886);
}
.div_leftup {
  margin-top: 3px;
  border-radius: 3px;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 5px;
  box-shadow: 2px 2px 3px #aaaaaa;
  height: 80%;
  width: 98%;
}
.right_col
{
  height: 100%;
  position: relative;
}
.right
{
  height: 90%;
  width: 90%;
  position: absolute;
  top: 1%;
  left: 5%;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 5px;
  box-shadow: 2px 2px 3px #aaaaaa;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
}
.right_top
{
  width: 100%;
  height: 4.5%;
  background-color: rgba(215, 215, 215, 1);
  font-size: 18px;
}
.right_middle
{
  width: 100%;
  height: 80%;
  position: relative;
}
.right_middle_table
{
  width: 80%;
  height: 90%;
  position: absolute;
  top: 10%;
  left: 10%;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
}
.table_title
{
  height:100%;
  width: 100%;
}
.table_title th
{
  width: 25%;
  height: 100%;
  text-align: center;
}
.table_body tr:nth-child(odd)  {
  background-color:#ffffff;
}

.table_body  tr:nth-child(even){
  background-color:#f1f1f1;
}
.table_body
{
  width: 100%;
  height: 40%;
}
.table_body tr
{
  height: 40%;
  text-align: center;
}
.table_body td
{
  width: 25%;
  height: 100%;
}
.right_bottom
{
  width: 100%;
  height: 15%;
  margin-top: 4%;
  font-size: 18px;
  margin-left: 10%;
}
</style>